<template>
  <!--区域经济健康发展分析-->
  <div class="healthy-development">
    <el-row :gutter="20">
      <el-col span="7">
        <chart-block chartID="chart1" :title="optionData.title" :optionData="optionData" chartType="getStackBar" height="26vh" v-if="optionDataShow"></chart-block>
        <chart-block chartID="chart2" :title="shadowLineOptionData.title" :optionData="shadowLineOptionData" chartType="getShadowLine" height="26vh" v-if="shadowLineOptionDataShow" style="margin-top:2vh"></chart-block>
        <chart-block chartID="chart3" :title="PolarBarOptionData.title" :optionData="PolarBarOptionData" chartType="getpolarBar" v-if="PolarBarOptionDataShow" height="26vh" style="margin-top:2vh"></chart-block>
      </el-col>
      <el-col span="17">
        <el-row :gutter="20">
          <el-col span="14">
            <div style="height:56.5vh">
              <div class="healthy-title">
                <p>重点企业健康度分析</p>
              </div>
              <div class="healthy-map" style="height:50vh">
                <mapv-block :pointList="pointList" :center="center" :zoom="zoom" showMarker="xmfx" @markerClick='markerClick'></mapv-block>
                <div id="map-pop" v-show="mapPopShow">
                    <p class="map-info-title">{{mapPopData.qymc}}</p>
                    <chart-block v-if="mapPopisShow" :chartID="'chart'+Math.random()" :optionData="mapPopOptionData" chartType="getBarLable" height="15vh" style="margin-top:0vh;background:rgba(0,0,0,0);border:none;box-shadow: none;width:100%" :isTitle="false" ref="echartsChart"></chart-block>
                </div>
              </div>
            </div>
          </el-col>
          <el-col span="10">
            <normal-block chartID="chart4" :title="normalBlockTitle" :isTitle="isTitle" height="56vh" style="margin-bottom:1.7vh">
              <template>
                <el-tabs v-model="activeName" v-if="healthDataShow" tab-position="bottom" :laze="true">
                  <el-tab-pane v-for="(item,index) in healthDataLength" label="" :name="item" :key="index" >
                    <div class="enterprise-health-rank" v-if="healthData[index]&&activeName==item">
                      <div class="title">
                        <img src="../../assets/images/left_dotted.png" alt="">
                        <p class="wholesale-trade-title">{{healthData[index].title}}</p>
                        <img src="../../assets/images/right_dotted.png" alt="">
                      </div>
                      <chart-block :chartID="'chart'+Math.random()" :key="index" :optionData="healthData[index]" chartType="getBarRadiusBlock" height="44vh" style="margin-top:0vh;background:rgba(0,0,0,0);border:none;box-shadow: none;width:100%" :isTitle="false" ref="echartsChart"></chart-block>
                    </div>
                    <!-- <div class="enterprise-health-rank" v-if="healthData[item+index]&&activeName==item">
                      <p class="wholesale-trade-title">{{healthData[item+index].title}}</p>
                      <chart-block :chartID="'chart'+Math.random()" :key="index+1" :optionData="healthData[item+index]" chartType="getBarRadiusBlock" height="21vh" style="margin-top:0vh;background:rgba(0,0,0,0);border:none;box-shadow: none;width:100%" :isTitle="false" ref="echartsChart"></chart-block>
                    </div> -->
                  </el-tab-pane>
                  <!-- <el-tab-pane  label="" :name="1" :key="0" >
                    <div class="enterprise-health-rank" v-if="healthData[0]&&activeName==1">
                      <div class="title">
                        <img src="../../assets/images/left_dotted.png" alt="">
                        <p class="wholesale-trade-title">{{healthData[0].title}}</p>
                        <img src="../../assets/images/right_dotted.png" alt="">
                      </div>
                      <chart-block :chartID="'chart'+Math.random()"  :optionData="healthData[0]" chartType="getBarRadiusBlock" height="44vh" style="margin-top:0vh;background:rgba(0,0,0,0);border:none;box-shadow: none;width:100%" :isTitle="false" ref="echartsChart"></chart-block>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane  label="" :name="2" :key="1" >
                    <div class="enterprise-health-rank" v-if="healthData[1]&&activeName==2">
                       <div class="title">
                        <img src="../../assets/images/left_dotted.png" alt="">
                        <p class="wholesale-trade-title">{{healthData[1].title}}</p>
                        <img src="../../assets/images/right_dotted.png" alt="">
                      </div>
                      <chart-block :chartID="'chart'+Math.random()"  :optionData="healthData[1]" chartType="getBarRadiusBlock" height="21vh" style="margin-top:0vh;background:rgba(0,0,0,0);border:none;box-shadow: none;width:100%" :isTitle="false" ref="echartsChart"></chart-block>
                    </div>
                    <div class="enterprise-health-rank" v-if="healthData[2]&&activeName==2">
                       <div class="title">
                        <img src="../../assets/images/left_dotted.png" alt="">
                        <p class="wholesale-trade-title">{{healthData[2].title}}</p>
                        <img src="../../assets/images/right_dotted.png" alt="">
                      </div>
                      <chart-block :chartID="'chart'+Math.random()"  :optionData="healthData[2]" chartType="getBarRadiusBlock" height="20vh" style="margin-top:0vh;background:rgba(0,0,0,0);border:none;box-shadow: none;width:100%" :isTitle="false" ref="echartsChart"></chart-block>
                    </div>
                  </el-tab-pane> -->
                </el-tabs>
              </template>
            </normal-block>
          </el-col>
        </el-row>
        <div class="listBox">
          <table-block :oprData="oprData" :pageSize="pageSize" :total="total" @currentChange="currentChange" :currePage="currePage"></table-block>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getCommonData, getCommonData10 } from '@/api/pages.js'
export default {
  name: "healthy-development",
  components: {
    ChartBlock: () => import('@/components/chart-block'),
    NormalBlock: () => import('@/components/normal-block'),
    TableBlock: () => import('@/components/table-block'),
    BashiMap: () => import('@/components/map/bashi-map'),
    MapvBlock:()=>import('@/components/mapv-block'),
  },
  props: {},
  data() {
    return {
      optionData: {
        title: '',
        categoryAxis: [], //类目轴数据
        seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
        color: ["#1985ff", "#ff6c00", "#01c188"],
        gridTop:"22%",
      },
      optionDataShow: false,
      pageSize: 5,
      total: 0,
      pageIndex: 1,
      oprData: {
        list: [],
        tableData: [],
      },
      shadowLineOptionData: {
        title: '',
        categoryAxis: [], //类目轴数据
        seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
        smooth: true,

        LinearGradientColor: [//柱状渐变颜色
          {
            topColor: 'rgba(0,234,255,0.2)',
            bottomColor: 'rgba(0,234,255,0.0)',
            LineCircleColor: "#00eaff",//折线图颜色
            LineCircleBorderColor: "#00eaff",//折线图描边颜色
          },
          {
            topColor: 'rgba(0,205,116,0.2)',
            bottomColor: 'rgba(0,205,116,0.0)',
            LineCircleColor: "#00cd74",//折线图颜色
            LineCircleBorderColor: "#00cd74",//折线图描边颜色
          },
          {
            topColor: 'rgba(255,230,27,0.2)',
            bottomColor: 'rgba(255,230,27,0.0)',
            LineCircleColor: "#ffe61b",//折线图颜色
            LineCircleBorderColor: "#ffe61b",//折线图描边颜色
          },
          {
            topColor: 'rgba(255,108,0,0.2)',
            bottomColor: 'rgba(255,108,0,0.0)',
            LineCircleColor: "#ff6c00",//折线图颜色
            LineCircleBorderColor: "#ff6c00",//折线图描边颜色
          },
        ]
      },
      shadowLineOptionDataShow: false,
      PolarBarOptionData: {
        title: '',
        categoryAxis: [], //类目轴数据
        seriesData: [],
        topColor: '#ffa336',
        bottomColor: '#26d7c4'
      },
      PolarBarOptionDataShow: false,
      barBlockOptionDate: {},
      barBlockOptionDate2: {},
      mapData: {
        mapData: [],
        effectData: [],
        scatterData: [],
      },
      normalBlockTitle: "",
      healthData: [],
      healthDataShow: false,
      healthDataLength: "",
      activeName: 1,
      pointList: [],
			center:{lng:119.140177,lat:35.56202},
			zoom:11,
      mapPopShow:false,
      mapPopData:{},
      mapPopOptionData:{
        axis:[],
        data:[],
      },
      mapPopisShow:false,
      currePage:1
    }
  },
  computed: {},
  created() {
    this.initData()
  },
  mounted() {
    this.getCommonData('P014', this.pageIndex, this.pageSize)
    this.getMapData()
    this.productionTotal()
    this.industrialEnergyConsumption()
    this.rubbishUse()
    this.companyHealthyRank()
    document.addEventListener('click',()=>{
      this.mapPopShow=false;
    },true)
  },
  methods: {
    currentChange(e) {
      this.currePage=e
      this.getCommonData('P014', e, this.pageSize)
    },
    //地图展示（最近一年各个区域的生产总值）
    getMapData() {
      getCommonData10({ busiCode: 'C033' }).then(res => {
        if (res.data.code === 200) {
          res.data.data.list.map((item, index) => {
            this.mapData.mapData.push({
              name: item.areaName,
              value: item.sczz
            })
            this.mapData.scatterData.push({
              name: item.areaName,
              value: [item.longtitude, item.latitude, item.sczz]
            })
          })
          let mapDatas =[]
					var lng =0
					var lat =0
					res.data.data.list.forEach((item,index,arr)=>{
						mapDatas.push({
							name:item.qymc,
							lng:item.longtitude,
							lat:item.latitude,
							id:item.qyId,
							sfzdxm:2
						})
						lng+=parseFloat(item.longtitude)/res.data.data.list.length
						lat+=parseFloat(item.latitude)/res.data.data.list.length
					})
					this.pointList=mapDatas
					this.center.lng=lng
					this.center.lat=lat
        }
      }).catch(err => {
      })
    },
    // 项目列表接口
    getCommonData(busiCode, current, size) {
      getCommonData(busiCode, current, size).then(res => {
        if (res.data.code == 200) {
          this.oprData.tableData = res.data.data.tableData
          this.oprData.list = res.data.data.list.records
          this.total = res.data.data.list.total
        }
      }).catch(err => { })
    },
    //石市生产总值变化-图表
    productionTotal() {
      getCommonData10({ busiCode: 'E047' }).then(res => {
        if (res.data.code === 200) {
          this.optionData.title = res.data.data.title
          this.optionData.categoryAxis = res.data.data.categoryAxis
          this.optionData.seriesData = res.data.data.seriesData
          this.optionDataShow = true
        }
      }).catch(err => { })
    },
    //石市规模以上工业能耗指标变化-图表
    industrialEnergyConsumption() {
      getCommonData10({ busiCode: 'E048' }).then(res => {
        if (res.data.code === 200) {
          this.shadowLineOptionData.title = res.data.data.title
          this.shadowLineOptionData.categoryAxis = res.data.data.categoryAxis
          this.shadowLineOptionData.seriesData = res.data.data.seriesData
          this.shadowLineOptionDataShow = true
        }
      }).catch(err => { })
    },
    //工业固体废物综合利用率-图表
    rubbishUse() {
      getCommonData10({ busiCode: 'E049' }).then(res => {
        if (res.data.code === 200) {
          this.PolarBarOptionData.title = res.data.data.title
          this.PolarBarOptionData.categoryAxis = res.data.data.categoryAxis
          this.PolarBarOptionData.seriesData = res.data.data.seriesData[0].data
          this.PolarBarOptionData.unit=res.data.data.seriesData[0].unit,
          this.PolarBarOptionDataShow = true
        }
      }).catch(err => { })
    },
    //各行企业健康发展排名-图表
    companyHealthyRank() {
      getCommonData10({ busiCode: 'E069' }).then(res => {
        this.healthData = [];
        if (res.data.code === 200) {
          this.normalBlockTitle = res.data.data.title
          res.data.data.seriesData.forEach((item, index) => {
            if (index % 2 === 0) {
              this.healthData.push({
                title: item.name,
                total: item.unit,
                shadowBarGradientColor: {//渐变色
                  topColor: 'rgba(24,38,68,0.5)',
                  bottomColor: 'rgba(175,76,69,0)'
                },
                left: 30,
                interval:false,
                seriesData: item.data,
                colorList: ['#fb6f59', '#fb6f59'],
                labelRightColor: "#ff7400",
                symbol: "image://",
              })
            } else {
              this.healthData.push({
                title: item.name,
                total: item.unit,
                shadowBarGradientColor: {//渐变色
                  topColor: 'rgba(17,42,75,0.5)',
                  bottomColor: 'rgba(7,116,164,0)'
                },
                left: 30,
                seriesData: item.data,
                interval:item.data.length>5?true:false,
                colorList: ['#5bcef9', '#5bcef9'], //排名标号的背景颜色[前五名,五名以后]
                labelRightColor: "#20bcf6",//右侧label颜色
                symbol: "image://",
              })
            }
          });
          // this.healthDataLength = Math.ceil(this.healthData.length / 2)
          this.healthDataLength = Math.ceil(this.healthData.length)
          this.healthDataShow = true
        }
      }).catch(err => { })
    },
    initData() {
      this.shadowLineOptionData = {
        title: '重庆市规模以上工业能耗指标变化',
        categoryAxis: ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'], //类目轴数据
        seriesData: [
          {
            name: '综合能源消费量', //如果有图例，这个就不能为空
            data: [ 132, 101, 134, 90, 230, 210, 132, 101, 134, 90],//数据
            unit: '', //数据的单位
          }, {
            name: '原煤消费量', //如果有图例，这个就不能为空
            data: [ 182, 191, 234, 290, 330, 310, 232, 201, 154, 190],//数据
            unit: '', //数据的单位
          }, {
            name: '电力消费量', //如果有图例，这个就不能为空
            data: [ 232, 201, 154, 190, 330, 410, 234, 290, 330, 310],//数据
            unit: '', //数据的单位
          }, {
            name: '水消费量', //如果有图例，这个就不能为空
            data: [ 190, 201, 154, 190, 220, 120, 234, 230, 300, 180],//数据
            unit: '', //数据的单位
          },
        ],
        smooth: true,
        LinearGradientColor: [//柱状渐变颜色
          {
            topColor: 'rgba(0,234,255,0.2)',
            bottomColor: 'rgba(0,234,255,0.0)',
            LineCircleColor: "#00eaff",//折线图颜色
            LineCircleBorderColor: "#00eaff",//折线图描边颜色
          },
          {
            topColor: 'rgba(0,205,116,0.2)',
            bottomColor: 'rgba(0,205,116,0.0)',
            LineCircleColor: "#00cd74",//折线图颜色
            LineCircleBorderColor: "#00cd74",//折线图描边颜色
          },
          {
            topColor: 'rgba(255,230,27,0.2)',
            bottomColor: 'rgba(255,230,27,0.0)',
            LineCircleColor: "#ffe61b",//折线图颜色
            LineCircleBorderColor: "#ffe61b",//折线图描边颜色
          },
          {
            topColor: 'rgba(255,108,0,0.2)',
            bottomColor: 'rgba(255,108,0,0.0)',
            LineCircleColor: "#ff6c00",//折线图颜色
            LineCircleBorderColor: "#ff6c00",//折线图描边颜色
          },
        ]
      }
      this.shadowLineOptionDataShow = true
    },
    //地图marker点击
    markerClick(data){
      this.mapPopShow=true
      let labelStyle=document.getElementById('map-pop');
			labelStyle.style.left=(data.clientX+10)+'px';//单位
			labelStyle.style.top=(data.clientY+20)+'px';
      getCommonData10({ busiCode: 'C034', qyId: data.item.id }).then(res => {
        if (res.data.code === 200) {
          this.mapPopData=res.data.data.list[0]
          this.mapPopOptionData.axis=['单位用能','单位产污','单位治污'];
          this.mapPopOptionData.data=this.mapPopData;
          this.mapPopisShow=true
        }
      }).catch(err => { })
    },
  },
  watch: {}
}
</script>

<style scoped lang="scss">
.healthy-development {
  width: 100%;
  height: 100%;
  padding: 0 1.3vw;
  padding-top: 7vh;
  padding-bottom: 3vh;
  .healthy-title {
    color: #ffffff;
    text-align: center;
    background: url("../../assets/images/healthy_company_title.png") top center
      no-repeat;
    background-size: 105% 100%;
    margin-top: -3.5vh;
    p {
      height: 12vh;
      line-height: 12vh;
      font-size: 0.85vw;
      font-family: Microsoft YaHei;
    }
  }
  .healthy-map {
    margin:0 1vw;
    margin-top: -2.5vh;
  }
  .enterprise-health-rank {
    .title{
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 1vh;
    }
    .wholesale-trade-title {
      color: #ffffff;
      text-align: center;
      font-size: 0.85vw;
      line-height: 3vh;
      padding: 0 0.5vw;
      font-family: Microsoft YaHei;
      white-space:nowrap;
    }
  }
  .listBox{
    height: 25vh;
    overflow-y: auto;
  }
  #map-pop{
      position: fixed;
      z-index: 1000;
      background: url("../../assets/images/map_pop_border.png") top center no-repeat;
      background-size: 100% 100%;
      color: #fff;
      font-size : 0.75vw;
      padding:2.5vh;
      min-width: 12vw;
    .map-info-title{
      text-align: center;
    }
  }
}
</style>
<style lang="scss">
.healthy-development {
  .el-tabs__nav-wrap:after {
    background: transparent;
  }
  .el-tabs__nav {
    float: none;
    text-align: center;
  }
  .el-tabs--bottom .el-tabs__header.is-bottom {
    margin-bottom: 0;
    margin-top: 0.5vh;
  }
  .el-tabs__item.is-active {
    color: #409eff;
    width: 0.5vw;
    height: 0.8vh;
    background: #35c8fe;
    border-radius: 3px;
  }
  .el-tabs__item {
    color: #409eff;
    width: 0.5vw;
    height: 0.8vh;
    background: rgba(53, 200, 254, 0.5);
    margin: 0.5vh;
    border-radius: 3px;
  }
}
</style>
